<header class="flex items-center py-[10px] px-[10px]">
  <eo-ng-input-group [nzPrefix]="prefixTemplateUser" class="!rounded-full">
    <input
      eo-ng-input
      (focus)="onSearchFocus($event)"
      type="text"
      class="flex-1 px-3"
      i18n-placeholder="@@Search"
      placeholder="Search"
      [(ngModel)]="searchValue"
    />
  </eo-ng-input-group>
  <ng-template #prefixTemplateUser>
    <eo-iconpark-icon name="search"></eo-iconpark-icon>
  </ng-template>
  <button
    *ngIf="!globalStore.isShare"
    nzType="primary"
    eo-ng-button
    class="ml-3"
    eo-ng-dropdown
    [nzDropdownMenu]="menu"
    nzPlacement="bottomRight"
    trace
    traceID="open_edit_api_document"
    (click)="projectApi.toAdd()"
  >
    <eo-iconpark-icon name="add"></eo-iconpark-icon>
  </button>
  <eo-ng-dropdown-menu #menu="nzDropdownMenu">
    <ul nz-menu>
      <a>
        <li nz-menu-item i18n="@@AddAPI" (click)="projectApi.toAdd()"> New API </li>
      </a>
      <a>
        <li nz-menu-item (click)="groupService.toAdd()" i18n="@@AddGroup">New Group</li>
      </a>
      <li nz-menu-divider></li>
      <a *ngFor="let item of extensionActions">
        <li nz-menu-item trace [traceID]="item.traceID" (click)="item.click(item.title)">{{ item.menuTitle }} </li>
      </a>
    </ul>
  </eo-ng-dropdown-menu>
</header>
<!-- Custom Group -->
<div class="group-tree">
  <eo-ng-tree-default
    [nzData]="apiGroupTree"
    [nzSelectedKeys]="nzSelectedKeys"
    #apiGroup
    [nzSearchValue]="searchValue"
    (nzSearchValueChange)="searchValueChange($event)"
    [nzSearchFunc]="searchFunc"
    [nzHideUnMatched]="true"
    [nzExpandedKeys]="expandKeys"
    (nzClick)="clickTreeItem($event)"
    [nzDraggable]="isEdit"
    nzBlockNode
    [nzBeforeDrop]="beforeDrop"
    (nzOnDrop)="drop($event)"
    [nzTreeTemplate]="nzTreeTemplate"
  ></eo-ng-tree-default>
  <nz-skeleton [nzLoading]="isLoading && !apiGroupTree.length" [nzActive]="true">
    <ng-template #nzTreeTemplate let-node let-origin="origin">
      <div class="h-full" [style.--tree-level]="node.level" apiGroupTree [node]="node">
        <div class="flex items-center justify-between tree-node" [ngSwitch]="origin.module">
          <div class="flex items-center" (contextmenu)="contextMenu($event, groupMenu)" [style.width]="'calc(100% - 30px)'">
            <!-- Folder -->
            <ng-container *ngSwitchDefault>
              <eo-iconpark-icon
                class="mr-[5px] flex-shrink-0"
                name="{{ node.isExpanded ? 'folder-open' : 'folder-close' }}"
              ></eo-iconpark-icon>
              <span class="text-[12px] truncate">{{ node.title }}</span>
            </ng-container>
            <!-- API -->
            <ng-container *ngSwitchCase="TYPE_GEROUP_MODULE.API">
              <b class="method-text method-text-{{ origin?.method }} mr-[5px]" *ngIf="origin?.method">
                {{ origin?.methodText }}
              </b>
              <span class="text-[12px] truncate">{{ origin.title }}</span>
            </ng-container>
            <!-- Mock -->
            <ng-container *ngSwitchCase="TYPE_GEROUP_MODULE.Mock">
              <eo-iconpark-icon class="mr-[5px] flex-shrink-0" name="mock"></eo-iconpark-icon>
              <span class="text-[12px] truncate">{{ origin.title }}</span>
            </ng-container>
            <!-- Case -->
            <ng-container *ngSwitchCase="TYPE_GEROUP_MODULE.Case">
              <eo-iconpark-icon class="mr-[5px] flex-shrink-0" name="diy-test"></eo-iconpark-icon>
              <span class="text-[12px] truncate">{{ origin.title }}</span>
            </ng-container>
          </div>
          <eo-ng-dropdown-menu #groupMenu="nzDropdownMenu">
            <ul nz-menu>
              <ng-container *ngFor="let item of operateByModule[origin.module || groupModuleName].list">
                <li nz-menu-item (click)="item.click(origin)">
                  {{ item.title }}
                </li>
              </ng-container>
            </ul>
          </eo-ng-dropdown-menu>
          <span
            class="flex tree-node-operate"
            *ngIf="isEdit&&(!operateByModule[origin.module || groupModuleName].showFn||operateByModule[origin.module || groupModuleName].showFn?.(origin))"
            (click)="$event.stopPropagation()"
          >
            <button eo-ng-button nzType="text" class="tree-item-btn" nzTrigger="click" eo-ng-dropdown [nzDropdownMenu]="groupMenu">
              <eo-iconpark-icon name="more" size="16px"></eo-iconpark-icon>
            </button>
          </span>
        </div>
      </div>
    </ng-template>

    <nz-empty *ngIf="!apiGroupTree.length" nzNotFoundImage="simple"> </nz-empty>
  </nz-skeleton>
</div>
